<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Auto-render test</title>
        <link rel="stylesheet" type="text/css" href="./katex/katex.min.css">
<!--        <link rel="stylesheet" type="text/css" href="./themes/style.css">-->
        <script type="text/javascript" src="./katex/katex.min.js"></script>
        <script type="text/javascript" src="./katex/contrib/auto-render.min.js"> </script>
    </head>
    <body>
        <script>
          function rendererCallBack() {
                Bridge.rendered();
          }
          function changeLatexText(text) {
                alert("heee");
                var element = document.getElementById('math')
                element.innerHTML = text;
                renderMathInElement(document.body, {
                      delimiters: [
                          {left: "$$", right: "$$", display: true},
                          {left: "$", right: "$", display: false},
                          {left: "\\(", right: "\\)", display: false},
                          {left: "\\[", right: "\\]", display: true}
                      ]
                });
                rendererCallBack();
          }
          document.addEventListener("DOMContentLoaded", function() {
                var element = document.getElementById('math')
                element.innerHTML = "我来渲染了我来渲染了";
                renderMathInElement(document.body, {
                      delimiters: [
                          {left: "$$", right: "$$", display: true},
                          {left: "$", right: "$", display: false},
                          {left: "\\(", right: "\\)", display: false},
                          {left: "\\[", right: "\\]", display: true}
                      ]
                });
          });
        </script>
        <img src="" id="img"/>
        <div id="mycontent">
            <div id="myShiti">
                <div>$$行间公式\pi$$,新的一行,$行内公式3\pi$,$4\pi$</div>
                <div><font size="10px" color="red"><span id='math'></span></font></div>
            </div>
            <div id="myImg">
                <img src=''/>
            </div>
        </div>
    </body>
</html>